<template>
	<view class="cart">
		<view class="flex align-center">
			<uv-text text="购物车" color="#333" size="36rpx" bold class="uv-text-init" prefixIcon="arrow-left" @click="back" />
			<uv-text
				class="uv-text-init"
				prefixIcon="map" 
				suffixIcon="arrow-right" 
				style="margin-left: 10rpx;"
				iconStyle="color:#9C9C9C;font-size=28rpx"
				text="国贸中心" color="#9C9C9C" size="28rpx"
			/>
		</view>

		<uv-gap height="10" bgColor="transparent" />
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<uv-text text="全部(0)" color="#333" size="28rpx" class="uv-text-init" />
				<uv-text
					@click="isEdit = !isEdit"
					class="uv-text-init" style="margin-left: 30rpx;"
					color="#333" size="28rpx" :text="isEdit ? '退出管理' : '管理'" 
				/>
			</view>
			<uv-text 
				class="uv-text-init" 
				text="管理" color="#333" size="28rpx" 
				@click="isEdit = true" v-if="!isEdit"
			/>
		</view>
		
		<uv-gap height="20" bgColor="transparent" />
		<view class="list">
			<uv-empty text="还没有相关订单" width="120rpx" marginTop="10" icon="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0814/49047202508141010003568.png"/>
		</view>
		
		<view class="jiesuan">
			<view class="flex align-center">
				<uv-checkbox-group v-model="checkAll">
					<uv-checkbox shape="circle" name="all" activeColor="#BC2721" label="全选" />
				</uv-checkbox-group>
			</view>
			<view class="flex align-center">
				<uv-text text="合计:" color="#333" size="28rpx" class="uv-text-init" v-if="!isEdit" />
				<uv-text 
					style="align-items: baseline;" v-if="!isEdit"
					prefixIcon="¥" text="0" color="#BC2721" size="46rpx" 
					class="uv-text-init" iconStyle="color:#BC2721; font-size: 28rpx;"
				/>
				<uv-button color="#BC2721" :text="`删除(${checkList.length})`" shape="circle" style="width: 200rpx;margin-left: 20rpx;" v-if="isEdit" />
				<uv-button color="#BC2721" text="结算" shape="circle" style="width: 200rpx;margin-left: 20rpx;" v-else />
			</view>
		</view>
		<!-- <lst-tabbar :value="1" :list="tabbarList" /> -->
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const isEdit = ref(false)
	const checkAll = ref([])
	const checkList = ref([])
	const tabbarList = ref([
		{ text: '首页', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/f3301202508161043448531.png',
		 active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/22463202508161044175474.png', path: '/pages-home/market/index' },
		{ text: '购物车', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/e39af202508161039548181.png', 
		active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a8c15202508161039249421.png', path: '/pages-home/market/cart' },
		{ text: '订单', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/e1f91202508161044512602.png', 
		active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/2edbe20250816104518674.png', path: '/pages-home/market/order' }
	])
	
	const back = () => {
		uni.navigateBack()
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>
<style lang="scss" scoped>
	.cart {
		padding: 30rpx;
		position: relative;
		padding-top: calc(var(--status-bar-height) + 50rpx);
	}
	.list {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.jiesuan {
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
</style>